25.10.22 ui context platform

부제: weaver

shadcn/ui, stroybook, chromatic ui 라이브러리 등은 현재 AI를 통한 UI개발에 재대로 맞는 flow가 없다고 생각
현재 flow headless ui등을 이용해서 기본 작업들을 하고 디자인을 입혀서 만들고 storybook을 통해 e2e test 진행

AI를 통한 개발
기획이 우선, 기획 문서를 작성 후 그에 맞게 AI 요청을 하면 작성됨
결국에는 기획된 문서들을 어떻게 잘 관리하고 있는지가 우선시됨, context, cursorrule에 넣어서 사용하나 이는 ide 종속적

ui 개발을 인공지능으로 개발하기 위해서 어떻게 개발하면 될까
디자인 시스템을 유지하는 게 생각보다 힘들어 개인 입장에서

목표는 올인원 플랫폼 개발부터 발행까지 사이트에서 할 수 있게, 백엔드도 headless로 근데 일단 frontend만 개발된다고 생각해도 될 듯
BM:

needs

1. 디자이너가 없이도 가능해야하지만 figma와 연동해서 가능해야함 figma mcp를 이용해서 피그마에 만들어진 거 가져올 수 있게
2. 기획 문서를 정돈하는 플랫폼으로 기획 문서만 작성하면 ui도 볼 수 있고 여러 케이스를 분리해서 볼 수 있어서 이걸 조립만 하면

전체적으로 AI를 이용한 프론트엔드 개발 flow를 적립하고 싶어
현재 프론트엔드 개발방식은 AI를 통한 개발에 적합하지 않은 방법이라고 생각함
AI를 이용함 = 기획문서를 다뤄야함. 하지만 현재는 .cursorrule, context folder에 기획안을 넣어서 관리하는 다른 방식으로 진행돼
코드를 짤 때 현재 가지고 있는 component들을 한 웹에 담고 storybook처럼 여러 테스트나 모습들을 확인할 수 있으며 전체 스타일을 통일할 수 있게 다른 컴포넌트를 만들 때도 굳이 다른 걸로 안하고 ai에 입력만 하면 기존 컴포넌트를 참고해서 만들어지게 하고 싶어 이를 위한 기획 세부내용을 짜고 장단점을 짜줘
npm run weaver 이렇게 하면 웹사이트가 켜져서 자동으로 지정한 폴더에서 컴포넌트를 이용해서 미리보기가 가능하고 figma처럼 자유롭게 컴포넌트들을 다룰 수도 있고 해당 웹사이트는 아예 도메인이 존재도 해서 ai를 이용해서 여기서 직접 컴포넌트를 만들면 기획 문서가 웹사이트내에 존재하고 이를 이용해서 코드로 바로 가져올 수도 있게끔하고 싶어